<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>史上最变态的色感游戏</title>
<link rel="stylesheet" href="../public/glair_game.css" />
<script type="text/javascript" src="../../js/jquery.js"></script>
</head>
<body>
<div id="cartoon">
  <!-- 第一到第四页漫画 -->
  <div class="page1">
    <img class="one" src="../images/glair_game/page1_one.gif" alt="第一话"/>
    <img class="two" src="../images/glair_game/page1_two.gif" alt="江湖"/>
    <img class="down_arrow" src="../images/glair_game/down_arrow.gif" alt="下滑箭头">
  </div>
  <div class="page2 none">
    <img class="one" src="../images/glair_game/page2_one.gif" alt="主角登场"/>
    <img class="two" src="../images/glair_game/page2_two.gif" alt="江湖"/>
    <img class="three" src="../images/glair_game/page2_three.gif" alt="吼">
    <img class="four" src="../images/glair_game/page2_four.gif" alt="隔壁村恶霸">
    <img class="down_arrow" src="../images/glair_game/down_arrow.gif" alt="下滑箭头">
  </div>
  <div class="page3 none">
    <img class="one" src="../images/glair_game/page3_one.gif" alt="回答问题"/>
    <img class="two" src="../images/glair_game/page3_two.gif" alt="问答"/>
    <img class="three" src="../images/glair_game/page3_three.gif" alt="问答">
    <img class="four" src="../images/glair_game/page3_four.gif" alt="答对了">
    <img class="down_arrow" src="../images/glair_game/down_arrow.gif" alt="下滑箭头">
  </div>
  <div class="page4 none">
    <img class="one" src="../images/glair_game/page4_one.gif" alt="游戏"/>
    <img class="two" src="../images/glair_game/page4_two.gif" alt="战斗"/>
    <img class="three" src="../images/glair_game/page4_three.gif" alt="战斗开始">
    <span class="loding_game" onclick="loding_game();"></span>
  </div>

  <!-- 游戏板块 -->
  <div class="game none">
    <div class="checkpoint">
      <img src="../images/glair_game/checkpoint_1.png" alt="关卡">
    </div>
    <div class="matchman">
      <img class="matchman_bg" src="../images/glair_game/matchman.gif" alt="火柴人">
      <img class="timer_bg" src="../images/glair_game/timer_bg.gif" alt="倒计时">
      <div class="timer">30</div>
    </div>
    <div class="content">
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span><span class="square"></span>
      <span class="square"></span>   
    </div>
    <div class="bottom">
      <img src="../images/glair_game/game_bottom.jpg" alt="游戏底部">
    </div>
  </div>
  
  <!-- 弹窗部分 -->
  <div id="mask" class="mask none"></div>
  <div id="popup_result" class="popup_result none">
    <div class="result">
      <img src="../images/glair_game/result0.gif" alt="闯关结果">
    </div>
    <div class="button">
      <img src="../images/glair_game/result_button1.gif" alt="结果按钮">
      <span class="left_btn" onclick="init();"></span>
      <span class="right_btn" onclick="share();"></span>
    </div>
  </div>
  <div id="mask2" class="mask2 none"></div>
  <div id="share" class="share none">
    <div class="share_popup">
      <img src="../images/glair_game/share_popup.png" alt="分享到朋友圈">
    </div>
  </div>

  <!-- 最后进入商城部分 -->
  <div class="last none">
    <img src="../images/glair_game/go_eggms.gif" alt="进洞领奖">
    <a class="go_eggms" href="../glair.php"></a>
  </div>
</div>

<script type="text/javascript">
  $(function(){
    auto2();
  });
  
  /*字体大小自适应rem单位*/
  function auto2(){
    var width = $('body').width();
    var font_size = 22*(width/320);
    var font_size2 = (width/320)*625+'%';
    $('body').css('font-size',font_size);
    $('html').css('font-size',font_size2);
  }

  /*浏览器横屏坚屏改变时也运行函数*/
  window.onorientationchange = function() {
    auto2();
  };

  /* 浏览器窗口发生改变也运行函数*/
  window.onresize=function(){
    auto2();
  };

  /* 判断页面是否活动到底部并加载更多漫画 */
  $(window).scroll(function () {
    var page1_height = $('.page1').height(); //获取第一页的高度
    var page2_height = $('.page2').height(); //获取第二页的高度
    var page3_height = $('.page3').height(); //获取第三页的高度
    var scroll_top = $(this).scrollTop(); //获取距离头部高度
    var scroll_height = $(document).height(); //获取整个版面高度
    var window_height = $(this).height(); //获取屏幕高度
    if(scroll_top >= page1_height - window_height){
      $('.page2').show();
    }
    if(scroll_top >= page1_height + page2_height - window_height){
      $('.page3').show();
    }
    if(scroll_top >= page1_height + page2_height + page3_height - window_height){
      $('.page4').show();
    }
  });

  /* 点击进入游戏 */
  function loding_game(){
    $('.game').show();
    $('.page1,.page2,.page3,.page4').hide();
    init();
  }

  var countdown = 0; //倒计时方法
  var timer = 0; //倒计时时间
  /* 初始化游戏数据 */
  function init(){
    num = 1;
    reset_game();
    $('.mask,.popup_result').hide();
    var random = parseInt(Math.random()*(0-48)+48);
    $(".game .content").find("span").eq(random).addClass("white");
    $(".game .content .square").siblings().addClass("one_checkpoint");
    $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_1.png');
    $('body,html').animate({scrollTop:0},0);
    timer = 30;
    countdown = setInterval(function(){
          game_time(timer--,num);
    },1000);
  }

  /* 点击判断用户点击的是否正确 */
  var num = 1;
  $('.game .content span').click(function(e){
    if(e.target == $('.white')[0]){
      reset_game();
      num++;
      next_checkpoint(num);
      game_time(timer+1,num);
    }else{
      popup_show(num);
      clearInterval(countdown);
    }
  });

  /* 游戏时间 */
  function game_time(cur_count,num){
    if(cur_count <= 0){
        clearInterval(countdown);
        popup_show(num);
      }else{
        cur_count --;
        $('.game .timer').text(cur_count);
      }
  }

  /* 点中注销原本游戏设定 */
  function reset_game(){
    $(".game .content span").attr('class','square');
  }

  /* 点中下一关游戏设定 */
  function next_checkpoint(num){
    var random = parseInt(Math.random()*(0-48)+48);
    switch(num){
      case 1:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("one_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_1.png');
        break;
      case 2:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("two_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_2.png');
        break;
      case 3:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("three_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_3.png');
        break;
      case 4:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("four_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_4.png');
        break;
      case 5:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("five_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_5.png');
        break;
      case 6:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("six_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_6.png');
        break;
      case 7:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("seven_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_7.png');
        break;
      case 8:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("eight_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_8.png');
        break;
      case 9:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("nine_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_9.png');
        break;
      case 10:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("ten_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_10.png');
        break;
      case 11:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("eleven_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_11.png');
        break;
      case 12:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("twelve_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_12.png');
        break;
      case 13:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("thirteen_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_13.png');
        break;
      case 14:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("fourteen_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_14.png');
        break;
      case 15:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("fifteen_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_15.png');
        break;
      case 16:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("sixteen_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_16.png');
        break;
      case 17:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("seventeen_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_17.png');
        break;
      case 18:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("eighteen_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_18.png');
        break;
      case 19:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("nineteen_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_19.png');
        break;
      case 20:
        $(".game .content").find("span").eq(random).addClass("white");
        $(".game .content .square").siblings().addClass("twenty_checkpoint");
        $(".game .checkpoint img").attr('src','../images/glair_game/checkpoint_20.png');
        break;
      case 21:
        popup_show(21);
        break;
    }
  }

  /* 点击错误或全部通关弹框 */
  function popup_show(num){
    switch(num){
      case 1:
        $("#popup_result .result img").attr('src','../images/glair_game/result0.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第0关，人称色瞎，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 2:
        $("#popup_result .result img").attr('src','../images/glair_game/result1.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第1关，人称色瞎，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 3:
        $("#popup_result .result img").attr('src','../images/glair_game/result2.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第2关，人称色瞎，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 4:
        $("#popup_result .result img").attr('src','../images/glair_game/result3.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第3关，人称色瞎，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 5:
        $("#popup_result .result img").attr('src','../images/glair_game/result4.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第4关，人称色瞎，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 6:
        $("#popup_result .result img").attr('src','../images/glair_game/result5.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第5关，人称色盲，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 7:
        $("#popup_result .result img").attr('src','../images/glair_game/result6.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第6关，人称色盲，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 8:
        $("#popup_result .result img").attr('src','../images/glair_game/result7.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第7关，人称色盲，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 9:
        $("#popup_result .result img").attr('src','../images/glair_game/result8.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第8关，人称色盲，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 10:
        $("#popup_result .result img").attr('src','../images/glair_game/result9.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第9关，人称色狼，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 11:
        $("#popup_result .result img").attr('src','../images/glair_game/result10.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第10关，人称色狼，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 12:
        $("#popup_result .result img").attr('src','../images/glair_game/result11.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第11关，人称色狼，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 13:
        $("#popup_result .result img").attr('src','../images/glair_game/result12.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第12关，人称色狼，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 14:
        $("#popup_result .result img").attr('src','../images/glair_game/result13.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第13关，人称色龙，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 15:
        $("#popup_result .result img").attr('src','../images/glair_game/result14.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第14关，人称色龙，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 16:
        $("#popup_result .result img").attr('src','../images/glair_game/result15.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第15关，人称色龙，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 17:
        $("#popup_result .result img").attr('src','../images/glair_game/result16.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第16关，人称色龙，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 18:
        $("#popup_result .result img").attr('src','../images/glair_game/result17.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第17关，人称色鬼，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 19:
        $("#popup_result .result img").attr('src','../images/glair_game/result18.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第18关，人称色鬼，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 20:
        $("#popup_result .result img").attr('src','../images/glair_game/result19.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button1.gif');
        document.title = '史上最变态的游戏，我居然玩到了第19关，人称色鬼，不服来战！';
        $('.mask,.popup_result').show();
        break;
      case 21:
        $("#popup_result .result img").attr('src','../images/glair_game/result20.gif');
        $("#popup_result .button img").attr('src','../images/glair_game/result_button2.gif');
        document.title = '史上最变态的游戏，我居然玩到了第20关，人称色鬼，不服来战！';
        $('.mask,.popup_result').show();
        break;
    }
  }

  /* 点击分享或装逼按钮弹出框 */
  function share(){
    $('.mask,.popup_result').hide();
    $('.mask2,.share').show();
    clearInterval(countdown);
    setTimeout(function(){
      $('.mask2,.share,.game').hide();
      $('.last').show();
    },10000)
  }

  /* 点击分享背景进行最后页面显示 */
  $('#mask2').click(function(){
    $('.mask2,.share,.game').hide();
    $('.last').show();
  });
</script>
</body>
</html>